<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS简介与体验</title>
</head>
<!--1.JS的书写位置-->
<script src="./js/my.js"></script>
<script>
    let bts = document.querySelectorAll('button')
    for (let i = 0; i < bts.length; i++) {
        bts[i].addEventListener('click' , function () {
            document.querySelector('.pink').className = ''
            this.className = 'pink'
        })
    }

    /* JS输入语法 */
    // 1.文档输出内容（document.write）———— 直接显示在前端
    // 可以输出文字内容
    document.write('我是div标签')
    // 可以输出DOM语法
    document.write('<h1>我是标题</h1>>')
    // 2.控制台打印输出 给 程序员（console.log）———— 显示在控制台
        // console是控制台 log是日志 ------ 可以简写为log,自动补全
    console.log('看看对不对')
    // 3.浏览器中弹出对话框
    alert("我是行内的script")

    /* JS输出语法 */
    // 作用: 显示一个对话框,对话框中包含一条文字信息，用来提示用户输入文字
    prompt('请输入你的姓名:')

</script>
<body>
<!--////////////////    这里是概念描述区     //////////////////-->
<!--JS是什么-->
<!--
    是一种运行在客户端(浏览器)上的编程语言，实现人机交互效果
    1.ECMAScript————基础语法
        JS基础语法核心知识（变量、分支语句、循环语句、对象）
    2.WebAPIs
        (1) DOM 操作文档，对于页面元素进行移动、大小、添加、删除等功能
        (2) BOM 操作浏览器，比如页面弹窗、检测窗口宽度、存储数据浏览器
-->
<!--JS能做什么-->
<!--
    1.网页特效（监听用户的一些行为让网页做出对应的反馈）
    2.表单验证（针对表单数据的合法性进行判断）
    3.数据交互（获取后台的数据，渲染到前端）
    4.服务端编程（node.js）
-->
<!--JS书写位置-->
<!--
    1.行内JavaScript
        规范: script标签写在<body>上面
    2.内部JavaScript
        规范: script标签写在</body>下面
        拓展: alert('你好，JS')页面弹出警告对话框
    3.外部JavaScript ———— 在外边写完了之后引入到文件内部
        <script src="./js/my.js">
        // 中间不要写内容，写了他也不执行
        </script>
-->
<!--JS怎么写-->
<!--
   单行注释
      符号: //
      作用: //右边这一行的代码会被忽略
      快捷键: ctrl + /

   块注释
      符号: /* */
      作用: 在 /* 和 */ 之间的所有内容都会被忽略
      快捷键: shift + alt + a

   结束符:
      作用: 使用英文的;代表语句结束
      实际情况: 实际开发中，可写可不写，浏览器(JavaScript 引擎)可以自动推断语句的结束位置
      现状: 在实际开发中，越来越多的人主张书写js代码时省略结束符
      约定: 为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）————————鱿鱼须说不写
-->
<!--JS输入输出语法-->
<!--
    目标: 能写出常见的JavaScript输入输出语法
    什么是语法:
        人和计算机打交道的规则约定
        我们要按照这个规则去写
        比如: 你吃了吗？
        我们程序员需要操控计算机，需要计算机能看懂
    注意:
        1.前端浏览器会按HTML文档流顺序执行JS代码
        2.alert() 和 prompt() 它们会跳过页面渲染先被执行
-->
<!--字面量-->
<!--
    概念: 在计算机科学中，字面量(literal)在计算机中描述 事/物
    比如:
        我们的工资是: 1000 此时1000就是 数字字面量
        '黑马程序员' 是字符串字面量
        还有接下来的 [] 数组字面量 , {} 对象字面量 等等
-->

<!--////////////////    这里是实验代码区     //////////////////-->
<!--1.JS能做什么-->
<button class="pink">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<hr>
<!--5.输入和输出语法-->

</body>
<style>
    .pink {
        background-color: pink;
    }
</style>
</html>